<template>
	<el-main>
		<el-alert title="封装el-select支持异步获取数据,以及根据字典名获取数据,继承el-select全部的属性和事件" type="success" style="margin-bottom:20px;"></el-alert>

		<el-row :gutter="15">
			<el-col :lg="12">
				<el-card shadow="never" header="异步单选">
					<jd-select v-model="value" dict="sys_user_sex" clearable filterable style="width: 100%;"></jd-select>
				</el-card>
			</el-col>
			<el-col :lg="12">
				<el-card shadow="never" header="异步多选">
					<jd-select v-model="value2" :apiObj="$API.system.dict.data.get" dict="sys_notice_type" clearable filterable multiple style="width: 100%;"></jd-select>
				</el-card>
			</el-col>
			<el-col :lg="12">
				<el-card shadow="never" header="字典选择器">
					<jd-select v-model="value3" dict="sys_yes_no" clearable filterable style="width: 100%;"></jd-select>
				</el-card>
			</el-col>
			<el-col :lg="12">
				<el-card shadow="never" header="自定义模板">
					<jd-select v-model="value4" dict="sys_yes_no" clearable filterable placeholder="自定义placeholder" style="width: 100%;">
						<template #option="{data}">
							<span style="float: left">{{ data.dictLabel }}</span>
							<span style="float: right; color: #999; font-size: 13px">{{ data.dictValue }}</span>
						</template>
					</jd-select>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	export default {
		name: 'jdselect',
		data() {
			return {
				value: '0',
				value2: ['1', '2'],
				value3: '',
				value4: ''
			}
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style>
</style>
